body
{
    overflow-y:
        scroll;
}
#title
{
    font-size:18pt;
    font-weight:820;
    color:black
}
.step-title
{
    font:16pt bold ;
    text-decoration:underline;
}
.step-div
{
    width:50%;
    display:table-cell;
}
.step-img
{
    width:96%;
}
.container
{
    width:800px;
}

.anno
{
    position:absolute;
    font-size:40pt;
    font-family: sans-serif;
    font-weight:100;
    color:#3399FF;
    cursor: move;
    display:none;
    text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000;
    /*
    text-shadow:  #000000 2px 2px; 
    */
}

.anno_bg
{
    position:relative;
    font-size:40pt;
    font-family: sans-serif;
    font-weight:100;
    color:blue;
    cursor: move;
    z-index:10000;
    display:none;
    width:30px;
    height:61px;
}

.category-panel{
    height:120px;
    display: table-cell;
}

#div-cat-img{
    /*
    width:100px;
    */
    width:50px;
}

#div-cat-name{
    width:80;
    line-height:80%;
    text-align:center;
    font: 14pt bold;
}
#div-cat-example{
    display: inline;
    width: 50%;
    height: 80px;
}
#button-panel{
    width:30%
}
.icon
{
    /*
    width:100px;
    */
    width:50px;
}
.category
{
    width: 100px;
    height: 80px;
}
/*
.icon
{
    width: 50;
    height: 50;
}
*/

#bgim {
    background-position: 0px 0px;
    width: 100px;
    height: 100px;
    border-radius: 54px;
    border: 4px solid black;

    float: left;
    display: none;
    background-repeat: no-repeat;
    position: absolute;

    z-index:100;
}

#anno_status{
    font-size: 16pt;
    height: 32px;
}
#anno_status_old{
    font-size: 16pt;
    margin-top: 8px;
    margin-left: 220px;
    height: 32px;
}

.anno_test {
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    background: blue;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    cursor: move;
    box-shadow: 1px 2px 5px -2px black;
    background: rgb(125, 185, 232);
    /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 1) 0%, rgba(30, 87, 153, 1) 99%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(125, 185, 232, 1)), color-stop(99%, rgba(30, 87, 153, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 1) 0%, rgba(30, 87, 153, 1) 99%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 1) 0%, rgba(30, 87, 153, 1) 99%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 1) 0%, rgba(30, 87, 153, 1) 99%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(125, 185, 232, 1) 0%, rgba(30, 87, 153, 1) 99%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db9e8', endColorstr='#1e5799', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}


.button {
    -moz-box-shadow:inset 0px 1px 0px 0px #dcecfb;
    -webkit-box-shadow:inset 0px 1px 0px 0px #dcecfb;
    box-shadow:inset 0px 1px 0px 0px #dcecfb;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bddbfa), color-stop(1, #80b5ea) );
    background:-moz-linear-gradient( center top, #bddbfa 5%, #80b5ea 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bddbfa', endColorstr='#80b5ea');
    background-color:#bddbfa;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:1px solid #84bbf3;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:40px;
    line-height:40px;
    width:100px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #528ecc;
}
.button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #80b5ea), color-stop(1, #bddbfa) );
    background:-moz-linear-gradient( center top, #80b5ea 5%, #bddbfa 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80b5ea', endColorstr='#bddbfa');
    background-color:#80b5ea;
}.button:active {
    position:relative;
    top:1px;
}
/* This button was generated using CSSButtonGenerator.com */

.hint{
    width:50px;
    height:50px;
    position:absolute;
}
.hint-img{
    width:50px;
    height:50px;
}
